<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title></title>
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<meta name="author" content="" />
		<meta name="copyright" content="" />
		<meta http-equiv="content-script-type" content="text/javascript" />
		<meta http-equiv="content-style-type" content="text/css" />
		<script type="text/javascript" src="../libraries/mootools/mootools-1.2.1-core.js"></script>
		<script type="text/javascript" src="../libraries/processing/processing.as.js"></script>
		<script type="text/javascript" src="../airapp/scripts/processing.js"></script>
		<script type="text/javascript" src="../airapp/scripts/scheduler.js"></script>
		<script type="text/javascript" src="../airapp/scripts/clock.js"></script>
		<script type="text/javascript">
			<!--
				window.addEvent("domready", function() {

					var TimeLisner = function() {
						var ajax = new Request({
							"url": "pde/ellipses.pde",
							"onSuccess": function(responseText, responseXML) {
								this.processing.run(responseText, new Array());
							}.bind(this)
						});
						ajax.send();
					}



					var date = new Date();
					var h = date.getHours();
					var m = date.getMinutes();

					var minute	 = parseInt(m);
					var hour	 = parseInt(h);
					var scheduleContext = {};
					for (var i = 0; i < 10; i++) {
						var timeValue = (minute >= 10) ? String(minute)
							: "0" + String(minute);

						var hourValue = (hour >= 10) ? String(hour)
							: "0" + String(hour);

						scheduleContext[hourValue + ":" + timeValue] = TimeLisner;
						minute++;
					}

					var Schedule = new Hash(scheduleContext);

					var clock = new Clock("content", Schedule, {
						"id": "processing",
						"swf": "../libraries/processing/processing.swf"
					});
					clock.addEvents({
						"start": TimeLisner,
						"stop": function(date, time) {
							var p = new Element("p", {"html": "STOP: " + date + " " + time});
							p.inject($("log"));
						}
					});
					clock.start();
				});
			//-->
		</script>
		<style type="text/css">
			div#warpper {
				width: 300px;
				margin: 0px auto;
			}
			
			div#content {
				border: 5px solid #cccccc;
			}
		</style>
	</head>
	<body>
		<div id="warpper">
			<div id="content"></div>
			<div id="information"><p class="dateTime"></p></div>
			<div id="log"></div>
		</div>
	</body>
</html>